<template>
	<view class="content">
		<search></search>
		<!-- 轮播广告 -->
		<view class="banner">
		  <swiper indicator-active-color="#EA4350" :indicator-dots="true" :circular="true" :autoplay="true">
			<swiper-item v-for="(item, index) in banners" :key="item.goods_id">
			  <navigator :url="item.navigator_url" :open-type="item.open_type">
				<image mode="widthFix" :src="item.image_src"></image>
			  </navigator>
			</swiper-item>
		  </swiper>
		</view>
		<!-- 导航栏 -->
		<view class="navs">
		  <view class="item" v-for="(item, index) in navs" :key="item.name">
		    <navigator open-type="switchTab" url="/pages/category/index">
		      <image mode="widthFix" :src="item.image_src"></image>
		    </navigator>
		  </view>
		</view>
		<!-- 楼层 -->
		<view class="floors">
		  <view class="floor" v-for="(item, index) in floors" :key="index">
		    <view class="floor_title">
		      <image mode="widthFix" :src="item.floor_title.image_src"></image>
		    </view>
		    <view class="floor_product">
		      <navigator :url="product.navigator_url" :open-type="product.open_type" class="product" v-for="(product, idx) in item.product_list" :key="idx">
		          <image :src="product.image_src"></image>
		      </navigator>
		
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	// 导入组件资源
	import search from '@/components/search/index.vue'
	
	export default {
		data() {
			return {
				banners: [],
				navs: [],
				floors: [],
			}
		},
		onLoad() {
			this.getBanners();
			this.getNavs();
			this.getFloors();
		},
		onPullDownRefresh() {
			Promise.all([this.getBanners(),this.getNavs(),this.getFloors()]).then(() => {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			async getBanners() {
				// 发送请求
				// uni.request({
				// 	url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
				// 	success: (res) => {
				// 		if (res.data.meta.status === 200) {
				// 			const message = res.data.message.map(item => {
				// 				item.navigator_url = item.navigator_url.replace('main', 'index');
				// 				return item;
				// 			})
				// 			// 设置data数据
				// 			this.banners = message;
				// 		}
				// 	}
				// })
				
				// 基于Promise写法
				// 数组解构方法，error表示数组下标为0的数据，res是数组下标为1的数据
				const [ error, res ] = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
				})
				if (res.data.meta.status === 200) {
					const message = res.data.message.map(item => {
						item.navigator_url = item.navigator_url.replace('main', 'index');
						return item;
					})
					// 设置data数据
					this.banners = message;
				}
			},
			async getNavs() {
				const [ error, res ] = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'
				})
				this.navs = res.data.message;
			},
			async getFloors() {
				const [ error, res ] = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata'
				})
			  // 处理跳转URL
			  res.data.message.forEach(item => {
				item.product_list.forEach(product => {
				  product.navigator_url = product.navigator_url.replace('goods_list', 'goods_list/index')
				})
			  })
				this.floors = res.data.message;
			}
		},
		components: {
			search
		}
	}
</script>

<style lang="less">
	.banner {
		swiper {
			height: 340rpx;
		}
		image {
			width: 100%;
		}
	}
	/* 导航栏 */
	.navs {
	  display: flex;
	  flex-direction: row;
	  margin-top: 12rpx;
	  .item {
	    flex:1;
	    display: flex;
	    justify-content: center;
	  }
	  image {
	    width: 140rpx;
	  }
	}
	
	/* 楼层 */
	.floor_product {
	  margin: 0 12rpx;
	}
	.floor .floor_product .product{
	  width: 232rpx;
	  height: 188rpx;
	  border-radius: 5rpx;
	  display: inline-block;
	}
	.floor .floor_product .product image {
	  width: 100%;
	  height: 100%;
	}
	.floor .floor_product .product:nth-child(even) {
	  margin: 0rpx 15rpx;
	}
	.floor .floor_product .product:first-child {
	  height: 386rpx;
	  float: left;
	}
	/* 楼层 */

</style>